@each $color, $value in $colors {
	@include bg-variant(".bg-#{$color}", $value);

	.text-#{$color} {
		color: $value !important;
	}
}


.icon {
	color: $text-muted !important;

	i {
		vertical-align: -1px;
	}

	@at-root a#{&} {
		text-decoration: none;
		cursor: pointer;

		&:hover {
			color: $body-color !important;
		}
	}
}

.o-auto   { overflow: auto !important; }
.o-hidden { overflow: hidden !important; }

.shadow	      { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-none  { box-shadow: none !important; }


$font-weights: (
  "normal": 400,
  "bold": 700,
  "ubold": 800
);

@each $name, $value in $font-weights{
  .fw-#{$name}{
    font-weight: $value !important;
  }
}

// Border Utils
$border-map: (
  't': 'top',
  'b': 'bottom',
  'l': 'left',
  'r': 'right'
);

.bd-l, .bd-all, .bd-r, .bd-t, .bd-b{
  border: $border-width solid transparent;
}

@each $name, $value in $border-map{
  .bd-#{$name}{
    border-#{$value}-color: $border-color;
  }
}

.bd-all{
  border-color: $border-color;
}

.bd-none{
  border: none;
}

